<script setup lang="ts">
import {ArrowRight} from '@element-plus/icons-vue'
import {getHomeBanner, getFirstCategory, getSecondCategory, getCourseList} from "@/api/home";
import {onBeforeMount, Ref, ref} from "vue";
import CourseCard from "@/components/common/CourseCard.vue";
import {AxiosResponse} from "axios";

type Promise1Param = (param: string) => Promise<void>
type PromiseVoid = () => Promise<void>

const bannerList:Ref<{ id: string, imageUrl: string, imageName: string}[]> = ref([]) //轮播图数据
const categoryList:Ref<{ id: string, categoryName: string}[]> = ref([]) //一级分类数据
const list: Ref<any[]> = ref([]) //二级分类
const activeIndex:Ref<number> = ref(0) //当前二级分类索引
const isShow:Ref<boolean> = ref(false) //是否显示二级分类
const courseList: Ref<any[]> = ref([]) //课程列表

const getBannerData:PromiseVoid  = async ():Promise<void> => {
  //获取banner图数据
  const res = await getHomeBanner()
  console.log(res)
  bannerList.value = res.data.list
}
const getFirstCategoryData:PromiseVoid = async ():Promise<void>  => {
  //获取一级分类数据
  const res = await getFirstCategory()
  console.log(res)
  categoryList.value = res.data.list
}
const getSecondCategoryData :Promise1Param = async (id: string):Promise<void> => {
  //获取二级分类数据
  const res: {
    data: {
      list: Array<any>
    }
  } = await getSecondCategory(id)
  // console.log(res)
  if (res.data.list.length > 0) {
    list.value.push(res.data.list)
  }
  const res2: AxiosResponse<any, any> = await getCourseList({
    pageNum: 1,
    pageSize: 4,
    entity: {
      firstCategory: id
    }
  })
  if (res2.data.pageInfo.list.length > 0) {
    courseList.value.push(res2.data.pageInfo.list)
  }
}

const mouseenterLi = (index: number) => {
  //鼠标移入
  activeIndex.value = index
  isShow.value = true
}
// const getCourseListData = async (data:any)=>{
//   //获取课程列表数据
//   const res = await getCourseList(data)
//   console.log(res)
// }
onBeforeMount(async () => {
  getBannerData()
  await getFirstCategoryData()
  categoryList.value.forEach((item) => {
    getSecondCategoryData(item.id)
  })

  console.log(courseList.value)
})
</script>

<template>
  <div class="swiper">
    <div class="swiper-main">
      <div class="swiper-top">
        <ul class="link">
          <li v-for="(item,index) in categoryList" :key="item.id" @mouseover="mouseenterLi(index)"
              @mouseout="isShow = false">
            <a href="">{{ item.categoryName }}
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </a>
            <div class="link-right" v-show="isShow && index===activeIndex ">
              <div class="link-right-top">
                <h3>基础知识</h3>
                <div>
                  <p>知识点：</p>
                  <ul>
                    <li v-for="i in list[activeIndex]" :key="i.id"> {{ i.categoryName }}</li>
                  </ul>
                </div>
              </div>
              <div class="link-right-bottom">
                <ul>
                  <li v-for="courseItem in courseList[activeIndex]" :key="courseItem.id">
                    <CourseCard
                        :title="courseItem.courseName"
                        :imgUrl="courseItem.courseCover"
                        :dengji="courseItem.courseLevel"
                        :count="courseItem.clicks"
                        :price="courseItem.discountPrice"
                        :class="{picture:true}"/>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
        <div class="banner">
          <el-carousel :interval="5000" arrow="always" height="373px">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.imageUrl" :alt="item.imageName">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="swiper-bottom">
        <ul>
          <li>
            <img src="../../assets/home/chuji.png" alt="初级课程" title="初级课程"/>
            <div class="text">
              <h3>初级课程</h3>
              <p>入门课、岗位多</p>
            </div>
          </li>
          <li>
            <img src="../../assets/home/zhongji.png" alt="中级课程" title="中级课程"/>
            <div class="text">
              <h3>中级课程</h3>
              <p>进阶与实战</p>
            </div>
          </li>
          <li>
            <img src="../../assets/home/gaoji.png" alt=""/>
            <div class="text">
              <h3>高级课程</h3>
              <p>轻松掌握核心技能</p>
            </div>
          </li>
          <li>
            <img src="../../assets/home/xiangmu.png" alt=""/>
            <div class="text">
              <h3>项目实战</h3>
              <p>手把手实践</p>
            </div>
          </li>
          <li>
            <img src="../../assets/home/suanfa.png" alt=""/>
            <div class="text">
              <h3>前端算法</h3>
              <p>笑傲前端技能</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.swiper {
  width: 100%;
  height: 600px;
  padding: 47px 0;
  background: url("@/assets/home/transitionbg.png") repeat;

  .swiper-main {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 15px;

    .swiper-top {
      width: 100%;
      height: 373px;
      border-radius: 11px 11px 0 0;
      display: flex;

      ul.link {
        display: flex;
        flex-direction: column;
        width: 137px;
        height: 373px;
        background: #2B283D;
        border-radius: 11px 0 0 0;
        padding-top: 20px;
        box-sizing: border-box;
        position: relative;

        & > li {
          width: 137px;
          height: 37px;
          margin-top: 10px;
          padding: 10px 0;
          box-sizing: border-box;
          color: #f2f2f2;
          text-align: center;

          a {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 100%;
          }

          &:hover {
            background: linear-gradient(90deg, rgb(46, 167, 241), transparent);

            .link-right {
              display: block;
            }
          }

          .link-right {
            width: 750px;
            height: 373px;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 137px;
            z-index: 20;
            border-radius: 0 10px 10px 0;
            display: flex;
            flex-direction: column;

            .link-right-top {
              display: flex;
              padding-left: 20px;
              flex-direction: column;
              justify-content: start;
              align-items: start;
              height: 150px;

              h3 {
                margin-top: 20px;
                color: #0c0c0c;
                font-size: 16px;
                font-weight: 600;
              }

              div {
                display: flex;
                width: 100%;
                margin-top: 20px;
                justify-content: stretch;

                p {
                  width: 80px;
                  color: #0c0c0c;
                  text-align: start;
                  line-height: 36px;
                }

                ul {
                  padding-right: 40px;
                  display: flex;
                  width: 100%;
                  flex-wrap: wrap;

                  li {
                    color: #0c0c0c;
                    padding: 10px;
                  }
                }
              }
            }

            .link-right-bottom {
              width: 100%;
              height: 223px;
              background: #f3f5f6;

              ul {
                display: flex;
                justify-content: start;
                flex-wrap: wrap;
                padding: 0 20px;

                li {
                  margin-left: 20px;

                  .picture > img {
                    width: 140px;
                    height: 80px;
                  }

                  .card {
                    width: 320px;
                    height: 100px;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: row;

                    .card-body {
                      width: 170px;
                      height: 80px;
                    }

                    .priceDiv {
                      display: flex;
                      flex-direction: row;

                      .vip {
                        display: inline-block;
                      }
                    }
                  }
                }
              }
            }
          }
        }

      }

      .banner {
        width: 100%;
        height: 373px;

        img {
          width: 863px;
          height: 373px;
          border-radius: 0 10px 0 0;
        }
      }
    }

    .swiper-bottom {

      ul {
        display: flex;
        justify-content: space-around;
        height: 100px;

        li {
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 50px;
          }

          .text {
            margin-left: 10px;

            h3 {
              font-size: 18px;
              font-weight: 600;
            }

            p {
              color: #666;
              margin-top: 10px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>